<gm:page title="Mashup" css="/css/g.css" class="googleTheme" onload="hide()">

<script type="text/JavaScript">
function test() {  
  alert("test");
}

function hide()
{
  var datalist = google.mashups.getObjectById("datalist");
  datalist.setVisible(false);
}

function findcity()
{
<![CDATA[
  var baseurl = "http://pipes.yahoo.com/pipes/pipe.run?_id=jt6Gg3JW3BGvM7tJouNLYQ&_render=rss&city=";
]]>
  var input = document.getElementById("city_to_add");
  var cityziplist = google.mashups.getObjectById("cityzipList");

  if (input == null || input.value == "") {
    alert("Please input the city's name");
    return false;
  }

  cityziplist.setData(baseurl+input.value);
  input.value = "";
}



function addcity()
{
  var citylistfeed = google.mashups.getObjectById("cityList").getData();
  var datafeed = google.mashups.getObjectById("datalist").getData();
  var selectedcity = google.mashups.getObjectById("cityzipList").getSelectedEntry();
var size = datafeed.size();  
//alert(size);
  var weatherEntry = datafeed.entryAt(0);
  var titleGPath = new GPath("atom:title");
  var summaryGPath = new GPath("atom:summary");
  var latGPath = new GPath("geo:lat");
  var longGPath = new GPath("geo:long");
  var latGmdGPath = new GPath("gmd:lat");
  var longGmdGPath = new GPath("gmd:long");

  var cityname = titleGPath.getValue(selectedcity);
  var summary = summaryGPath.getValue(weatherEntry);
  var lat = latGPath.getValue(weatherEntry);
  var long = longGPath.getValue(weatherEntry);

  if (citylistfeed.canCreate()) {
    var entry = citylistfeed.createEntry();
    titleGPath.setValue(entry, cityname);
    summaryGPath.setValue(entry, summary);
    latGmdGPath.setValue(entry, lat);
    longGmdGPath.setValue(entry, long);
    citylistfeed.addEntry(entry);
  }

var cityzipfeed = google.mashups.getObjectById("cityzipList").getData();
cityzipfeed.removeEntry(selectedcity);

//alert("test");

  return true;
}

function getweather()
{
<![CDATA[
  var baseurl = "http://weather.yahooapis.com/forecastrss?p=";
  var tailurl = "&u=c";
]]>

  var selectedcity = google.mashups.getObjectById("cityzipList").getSelectedEntry();
  var summaryGPath = new GPath("atom:summary");
  var cityzip = summaryGPath.getValue(selectedcity);
  var datalist = google.mashups.getObjectById("datalist");
  datalist.setData(baseurl + cityzip + tailurl);
//alert(baseurl + cityzip + tailurl);

  addcity();

  return true;
}

</script>

<gm:list id="datalist" />

  <div class="gm-app-header">
    <table>
      <tr>
        <td width="200"><h1>My Mashup</h1></td>
      </tr>
      <tr>
        <td>Group Member: Cen Ketie, Ding Yanjing</td>
      </tr>
    </table>
  </div>


  <table width="900">
    <tr valign="top">
      <td width="300">
        <table width="100%">
          <tr>
          <td>
            <input id="city_to_add" type="text"/>
            <input type="submit" value="Find City" onclick="findcity()"/>
          </td>
          </tr>
          <tr>
            <gm:list id="cityzipList" data="${tmp}" template="cityzipTemplate">
            <gm:handleEvent event="select" execute="getweather()" />
            </gm:list>
          </tr>
          <tr>
          <td>
            <gm:list id="cityList" data="${tmp}/citys" template="cityInfoTemplate">
            <gm:handleEvent src="cityMap" event="select"/>
            </gm:list>
          </td>
          </tr>
        </table>
      </td>
      <td class="mainPanel">
        <gm:map id="cityMap" height="500px" data="${cityList}" latref="gmd:lat" lngref="gmd:long" lat="39.93" lng="116.28" infotemplate="detailTemplate">
          <gm:handleEvent src="cityList" event="select"/>
        </gm:map>
      </td>
    </tr>    
  </table>

  <gm:template id="cityzipTemplate">
    <table width="100%" class="blue-theme">
      <tr repeat="true">
        <td width="40%">
          <gm:text ref="atom:title" />
        </td>
        <td width="40%">
          <gm:text ref="atom:summary" />
        </td>
        <td>
          <gm:editButtons />
        </td>
      </tr>
    </table>
  </gm:template>

  <gm:template id="cityInfoTemplate">
    <table width="100%" class="blue-theme">
      <thead>
        <tr>
          <td colspan="2">Citys</td>
        </tr>
      </thead>
      <tbody repeat="true">
        <tr>
        <td width="80%">
          <gm:text ref="atom:title" />
        </td>
        <td>
          <gm:editButtons />
        </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2" align="left">
            <gm:pager/>
          </td>
        </tr>
      </tfoot>
    </table>
  </gm:template>

  <gm:template id="detailTemplate">
    <div repeat="true">
      <gm:html ref="atom:summary"/>
    </div>
  </gm:template>

</gm:page>

















































































































